<template>
    <div class="dialog_info">
      <div class="dialog_info_title" >
        <div class="water-table">
          <el-row>
            <div class="subtitle">基本信息</div>
              <div class="JibenTable">
                <ul>
                  <li><div><div>县（区、市、旗）名称</div><div>{{TybDetailDataList.CADNM ? TybDetailDataList.CADNM : '--' }}</div></div></li>
                  <li><div><div>县（区、市、旗）代码</div><div>{{TybDetailDataList.CADCD ? TybDetailDataList.CADCD : '--' }}</div></div></li>
                  <li><div><div>乡镇名称</div><div>{{TybDetailDataList.TADNM ? TybDetailDataList.TADNM : '--' }}</div></div></li>
                  <li><div><div>乡镇代码</div><div>{{TybDetailDataList.TADCD ? TybDetailDataList.TADCD : '--' }}</div></div></li>
                  <li><div><div>名称</div><div>{{TybDetailDataList.ADNM ? TybDetailDataList.ADNM : '--' }}</div></div></li>
                  <li><div><div>代码</div><div>{{TybDetailDataList.ADCD ? TybDetailDataList.ADCD : '--' }}</div></div></li>
                  <li><div><div>类型</div><div>{{TybDetailDataList.TYPE ? TybDetailDataList.TYPE : '--' }}</div></div></li>
                  <li><div><div>人口</div><div>{{TybDetailDataList.PCOUNT ? TybDetailDataList.PCOUNT : '--' }}</div></div></li>
                  <li><div><div>河流名称</div><div>{{TybDetailDataList.RIVLNM ? TybDetailDataList.RIVLNM : '--' }}</div></div></li>
                  <li><div><div>河流代码</div><div>{{TybDetailDataList.RIVL ? TybDetailDataList.RIVL : '--' }}</div></div></li>
                  <li><div><div>经度</div><div>{{TybDetailDataList.LGTD ? TybDetailDataList.LGTD : '--' }}</div></div></li>
                  <li><div><div>纬度</div><div>{{TybDetailDataList.LTTD ? TybDetailDataList.LTTD : '--' }}</div></div></li>
                </ul>
              </div>
          </el-row>
          <el-row>
            <div class="subtitle">风险隐患要素类别</div>
              <div class="JibenTable01">
                <ul>
                  <li style="width: 50%;"><div><div>【跨沟道路、桥涵】名称</div><div class="row_50">{{TybDetailDataList.KQNM ? TybDetailDataList.KQNM : '--' }}</div></div></li>
                  <li style="width: 50%;"><div><div>【跨沟道路、桥涵】编码</div><div class="row_50">{{TybDetailDataList.KQCD ? TybDetailDataList.KQCD : '--' }}</div></div></li>
                  <li style="width: 50%;"><div><div>【塘（堰）坝】名称</div><div class="row_50">{{TybDetailDataList.TYBNM ? TybDetailDataList.TYBNM : '--' }}</div></div></li>
                  <li style="width: 50%;"><div><div>【塘（堰）坝】编码</div><div class="row_50">{{TybDetailDataList.TYBCD ? TybDetailDataList.TYBCD : '--' }}</div></div></li>
                  <li style="width: 50%;"><div><div>【多支齐汇】河流名称</div><div class="row_50">{{TybDetailDataList.QHNM ? TybDetailDataList.QHNM : '--' }}</div></div></li>
                  <li style="width: 50%;"><div><div>【多支齐汇】河流代码</div><div class="row_50">{{TybDetailDataList.QHCD ? TybDetailDataList.QHCD : '--' }}</div></div></li>
                  <li>
                    <div><div>【局地河势与微地形】束窄</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.SZ == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>【局地河势与微地形】急弯</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.JW == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>【局地河势与微地形】低洼地</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.DWD == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>【局地河势与微地形】临河滑坡</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.LHHP == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>【局地河势与微地形】泥石流</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.NSL == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>沟滩占地</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.GTZD == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                </ul>
              </div>
          </el-row>
          <el-row>
            <div class="subtitle">风险隐患影响类型</div>
              <div class="JibenTable02">
                <ul>
                  <li>
                    <div><div>溃决</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.KJ == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>壅水</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.YS == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>顶托</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.DT == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>改道</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.GD == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  <li>
                    <div><div>漫流</div><div>
                      <div class="img" v-if="TybDetailDataList && TybDetailDataList.ML == 1">
                        <img src="@/assets/dialog/gou.png" alt="" />
                      </div>
                      <div v-else>--</div>
                    </div></div>
                  </li>
                  </ul>
              </div>
          </el-row>
          <el-row>
            <div class="subtitle">备注</div>
              <div class="JibenTable JibenTable03">
                <ul>
                  <li><div><div>备注</div><div>{{TybDetailDataList.REMARK ? TybDetailDataList.REMARK : '--' }}</div></div></li>
                </ul>
              </div>
          </el-row>
          <el-row>
            <div class="subtitle">图片详情</div>
            <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;margin: 15px;">
              <template>
                <div v-if="TybDetailDataList && TybDetailDataList.PICPATH.length >0" class="block imgList">
                  <el-carousel height="100%"  :arrow="TybDetailDataList.PICPATH.length== 1? 'never' : 'always'">
                    <el-carousel-item v-for="(item, i) in TybDetailDataList.PICPATH" :key="i">
                      <img :src="item">
                      <div>{{ item }}</div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div v-if="!TybDetailDataList || !TybDetailDataList.PICPATH || TybDetailDataList.PICPATH.length<=0"   class="imgList noImgList">
                    <div class="empty"> </div>
                    <img src="@/assets/dialog/noImgIcon.png" alt="">
                </div>
              </template>
            </div>
          </el-row>
        </div>
        

  
      </div>
    </div>
  </template>
<script>


export default {
    components: { },
    data() {
        return {
            // 图片类型
            imgType: [
              {'name':'洪痕点图','ind':'0'},
              {'name':'受灾图','ind':'1'}
            ], 
            imgTypeNum:'0',
            // 历史洪痕页面数据
            TybDataList: [],
            // 洪痕点详情数据
            TybDetailDataList:{},
            parameter: {},
            PionId:undefined, //选中的点

        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.remarks
        this.getData() // 获取数据
        // console.log('点击的点',this.parameter);
        
    },
    methods: {
        // 获取数据
        getData(){
            this.TybDetailDataList =this.parameter
            console.log("TybDetailDataList",this.TybDetailDataList);
            
            // var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/TYB.json`
            // this.$axios.get(url).then(res => {
            //     this.TybDataList = res.data.features;
            //     console.log('TYB数据',this.TybDataList);
                
            //     res.data.features.map((item) => {
            //         if(item.properties.PID == this.parameter.PID){
            //             this.TybDetailDataList = item;
            //             this.PionId=item.properties.PID
            //         }
            //     })
            // })
        },



       
    }
}
</script>
<style lang="less" scoped>
 .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
    padding:5px 10px 0px  20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    min-height: 100%;
    max-height: max-content;
		.dialog_info_title {
			//height: 100%;
      min-height: 100%;
      max-height: max-content;
			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	.water-table{
    height: 640px;
    overflow:auto;
	}
	
  .noData{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0px;
  }

  
  //列表区域

  .JibenTable {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 25%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              padding-left: 20px;
              //text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: 3px 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2),>:nth-last-child(3),>:nth-last-child(4){
          border: none;
        }
        &>:nth-child(1),>:nth-child(5),>:nth-child(9),>:nth-child(13){
          &>div{
              padding-left: 12px;
              //text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}
  .JibenTable01 {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 25%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: 3px 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2){
          border: none;
        }
        &>:nth-child(1),>:nth-child(3),>:nth-child(5),>:nth-child(7),>:nth-child(11){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}
  .JibenTable02 {
    width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
    margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 20%;
            //border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: 3px 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
       
        &>:nth-child(1){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}

.JibenTable03 {
  ul{
    li{
      width: 100% !important;
    }
  }
}

.imgList {
    padding: 10px;
    width: 562px;
    height: 424px;
    background: url(../../assets/dialog/tukuang.png) no-repeat center;
    background-size: 100% 100%;

    img {
        width: 100%;
        height: 100%;
    }

    /deep/.el-carousel__item,
    /deep/.el-carousel {
        //height: 220px;
        height: 100%;
    }
}

.noImgList {
    display: flex;
    justify-content: center;
    align-items: center;
    img{
    width:100px;
    height:120px;
    }
}

.subtitle{
  height: 28px;
  line-height: 0px;
  margin: 20px 0 4px 0;
  text-indent: 4px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
  background: url(../../assets/dialog/dialogBT.png) no-repeat center;
  background-size: 100% 100%;
}
.img{
  img{
    height: 10px !important;
  }
  
}
.row_50{
  word-wrap:break-word;
}
</style>
